<template>
  <div class="boardBox">
    <!-- <el-button type="primary" @click="handleCanvas2Img">保存</el-button> -->
    <!-- 用户可以通过点击大按钮来关闭弹窗 -->
    <div class="closeBigBtn">
      <el-button type="primary" @click="handleCanvas2Img">下载图片</el-button>
    </div>
    <!-- 绘图组件容器DOM -->
    <div ref="tuiImageEditor" class="tui-image-editor"></div>
  </div>
</template>
<script>
/**
 * @link https://nhn.github.io/tui.image-editor/latest/Ui
 */

import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import ImageEditor from "tui-image-editor";
import logo from '@/assets/logo.png'
// 中文菜单
const localeCN = {
  Crop: "裁剪",
  Load: '替换图片',
  DeleteAll: "全部删除",
  Delete: "删除",
  Undo: "撤销",
  Redo: "反撤销",
  Reset: "重置",
  Flip: "镜像",
  Rotate: "旋转",
  Draw: "画",
  Shape: "形状标注",
  Icon: "图标标注",
  Text: "文字标注",
  Mask: "遮罩",
  Filter: "滤镜",
  Bold: "加粗",
  Italic: "斜体",
  Underline: "下划线",
  Left: "左对齐",
  Center: "居中",
  Right: "右对齐",
  Color: "颜色",
  "Text size": "字体大小",
  Custom: "自定义",
  Square: "正方形",
  Apply: "应用",
  Cancel: "取消",
  "Flip X": "X 轴",
  "Flip Y": "Y 轴",
  Range: "区间",
  Stroke: "描边",
  Fill: "填充",
  Circle: "圆",
  Triangle: "三角",
  Rectangle: "矩形",
  Free: "曲线",
  Straight: "直线",
  Arrow: "箭头",
  "Arrow-2": "箭头2",
  "Arrow-3": "箭头3",
  "Star-1": "星星1",
  "Star-2": "星星2",
  Polygon: "多边形",
  Location: "定位",
  Heart: "心形",
  Bubble: "气泡",
  "Custom icon": "自定义图标",
  "Load Mask Image": "加载蒙层图片",
  Grayscale: "灰度",
  Blur: "模糊",
  Sharpen: "锐化",
  Emboss: "浮雕",
  "Remove White": "除去白色",
  Distance: "距离",
  Brightness: "亮度",
  Noise: "噪音",
  "Color Filter": "彩色滤镜",
  Sepia: "棕色",
  Sepia2: "棕色2",
  Invert: "负片",
  Pixelate: "像素化",
  Threshold: "阈值",
  Tint: "色调",
  Multiply: "正片叠底",
  Blend: "混合色",
  Double: '双击',
  Download: '预览图片'
}
// 画布组件自定义样式
const customTheme = {
  // image 坐上角度图片
  'common.bi.image': '', // 在这里换上你喜欢的logo图片
  'common.bisize.width': '0px',
  'common.bisize.height': '0px',
  'common.backgroundImage': 'none',
  'common.backgroundColor': '#f3f4f6',
  'common.border': '1px solid #444',

  // header
  'header.backgroundImage': 'none',
  'header.backgroundColor': '#f3f4f6',
  'header.border': '0px',

  // load button
  'loadButton.backgroundColor': '#fff',
  'loadButton.border': '1px solid #ddd',
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',
  'loadButton.display': 'none', // 可以直接隐藏掉

  // download button
  'downloadButton.backgroundColor': '#fdba3b',
  'downloadButton.border': '1px solid #fdba3b',
  'downloadButton.color': '#fff',
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
  'downloadButton.display': 'block', // 可以直接隐藏掉

  // icons default
  'menu.normalIcon.color': '#8a8a8a',
  'menu.activeIcon.color': '#555555',
  'menu.disabledIcon.color': '#434343',
  'menu.hoverIcon.color': '#e9e9e9',
  'submenu.normalIcon.color': '#8a8a8a',
  'submenu.activeIcon.color': '#e9e9e9',

  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',

  // submenu primary color
  'submenu.backgroundColor': '#1e1e1e',
  'submenu.partition.color': '#858585',

  // submenu labels
  'submenu.normalLabel.color': '#858585',
  'submenu.normalLabel.fontWeight': 'lighter',
  'submenu.activeLabel.color': '#fff',
  'submenu.activeLabel.fontWeight': 'lighter',

  // checkbox style
  'checkbox.border': '1px solid #ccc',
  'checkbox.backgroundColor': '#fff',

  // rango style
  'range.pointer.color': '#fff',
  'range.bar.color': '#666',
  'range.subbar.color': '#d1d1d1',

  'range.disabledPointer.color': '#414141',
  'range.disabledBar.color': '#282828',
  'range.disabledSubbar.color': '#414141',

  'range.value.color': '#fff',
  'range.value.fontWeight': 'lighter',
  'range.value.fontSize': '11px',
  'range.value.border': '1px solid #353535',
  'range.value.backgroundColor': '#151515',
  'range.title.color': '#fff',
  'range.title.fontWeight': 'lighter',

  // colorpicker style
  'colorpicker.button.border': '1px solid #1e1e1e',
  'colorpicker.title.color': '#fff'
}

export default {

  data() {
    return {
      options: {
        includeUI: {
          // 默认加载的图片
          loadImage: {
            // 图片路径
            path: logo,
            // 图片的名字，可以省略
            name: 'image'
          },
          // 默认开启绘图的功能,小屏幕情况下，直接打开菜单，会占用较大屏幕空间，不美观
          initMenu: 'text',
          // 支持的菜单
          menu: [
            // 'crop', // 裁切
            'draw', // 添加绘画
            'text', // 添加文本
            // 'rotate', // 旋转
            // 'flip', // 翻转
            // 'shape', // 添加形状
            // 'icon', // 添加图标
            'mask', // 添加覆盖
            // 'filter' // 添加滤镜
          ],
          // 菜单位置在下面
          menuBarPosition: 'bottom',
          // 汉化
          locale: localeCN,
          // 自定义样式（隐藏默认顶部栏目、按钮颜色。。。）
          theme: customTheme
        },
        // 设置画布的最大宽高，能自动等比例缩放大图片到指定的宽高内
        // // for tui-image-editor component's "options" prop
        cssMaxWidth: 700,
        cssMaxHeight: 500,
      },
      editorInstance: null
    };
  },
  mounted() {
    this.editorInstance = new ImageEditor(this.$refs.tuiImageEditor, this.options);
    this.addEventListener();
  },
  methods: {
    addEventListener() {
      Object.keys(this.$listeners).forEach((eventName) => {
        this.editorInstance.on(eventName, (...args) => this.$emit(eventName, ...args));
      });
    },
    handleCanvas2Img() {
      const base64String = this.editorInstance.toDataURL();
      const a = document.createElement("a");
      a.href = base64String;
      a.download = "rs-" + Date.now() + ".png";
      a.target = "_blank";
      a.style.display = "none";
      let event = new MouseEvent("click");
      a.dispatchEvent(event);
      a.click();
    }
  },
  destroyed() {
    Object.keys(this.$listeners).forEach((eventName) => {
      this.editorInstance.off(eventName);
    });
    this.editorInstance.destroy();
    this.editorInstance = null;
  },
};
</script>
<style lang="scss" scoped>
.boardBox {
  width: 100%;
  height: 80vh;
  background: #f9f9f9;
  position: relative;

  canvas {
    border: 1px solid #b3b3b3;
  }
}

// 弹窗的关闭按钮
.closeBigBtn {
  position: absolute;
  left: 150px;
  top: 12px;
  z-index: 1;
}
</style>

<style>
/* 设置弹窗页面的主体内容的内边距，这样绘图区域会更大 */
.el-dialog__body {
  padding: 30px 5px;
}

/* 设置弹窗中的图床距离顶部距离 */
.el-dialog__header {
  margin-bottom: 25px;
}

/* 强制压缩菜单的高度 ，减少占用屏幕的空间*/
.tui-image-editor-container .tui-image-editor-submenu {
  height: auto !important;
}

.tui-image-editor-container.bottom .tui-image-editor-submenu>div {
  padding: 10px !important;
}

.tui-image-editor-container .tui-image-editor-help-menu.top {
  background-color: white;
}

/* 顶部工具栏定位 */
.tui-image-editor-container .tui-image-editor-header {
  top: 0;
}

.tui-image-editor-container .tui-image-editor-help-menu.top {
  top: -50px;
}

/* 取消超出部分隐藏，否则因为顶部工具栏已经超出去了，会显示不出来
.tui-image-editor-container {
  overflow: auto;
} */
/* 顶部工具栏定位 */
.tui-image-editor-container {
  overflow: visible;
}

.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {
  display: none;
}
</style>